<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: 任静
 * @Date: 2020-11-11 16:28:54
 * @LastEditors: 任静
 * @LastEditTime: 2020-11-13 22:12:20
-->
<template>
  <div class="classifly">
    <van-search v-model="value" placeholder="请输入搜索关键词" @click="goSearch"/>
    <main>
      <div class="left">
        <van-sidebar v-model="active" @change="tabChange">
          <van-sidebar-item
            :title="item.name"
            v-for="(item, index) in homeList"
            :key="item.id"
            :name="index"
          />
        </van-sidebar>
      </div>
      <div class="right" @scroll="scrollEvent" ref="scrollEle">
        <!-- {{classiflyContentList}} -->
        <div v-for="item in classiflyContentList" :key="item.id">
          <h3>{{ item.name }}</h3>
          <div class="list">
            <dl v-for="item1 in item.rankList" :key="item1.id"  ref="box" >
              <dt>
                <img :src="item1.image" alt="" @click="goDetail(item1)" />
              </dt>
              <dd>{{ item1.name }}</dd>
            </dl>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { defineComponent, computed, ref ,reactive, onMounted} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    let store = useStore();
    let active = ref(0);
    let router = useRouter();
    let scrollEle=ref()
    let box=ref()
         let boxs = reactive([]);
    store.dispatch("home/getHomeList", { mid: 0 });
    store.dispatch("classifly/getClassiflyContentList", { mid: 0 });
    //tab切换
    function tabChange(index) {
      console.log(index);
      console.log('scrollEle',scrollEle)
      // scrollEle.scrollTop=index*100
      active = index;
      //点击左侧右侧随之滚动
      boxs[index].scrollIntoView({ behavior: "smooth" })
    }
   
    //右侧滚动事件
    function scrollEvent(e){
        console.log(e.currentTarget)
         let ele = e.currentTarget;
      boxs=[...ele.children]
      //方法一
    //      let childHeight = reactive([]);
    //   // 计算滚动元素的高度
    //   let wrapHeight = ele.getBoundingClientRect().height;
    //   console.log(wrapHeight)
    //   // 计算子元素的高度
    //   let _childHeight = [...ele.children].map(item=>{
    //     return item.getBoundingClientRect().height;
    //   });
    //   _childHeight = _childHeight.map((item, index)=>{
    //     return _childHeight.slice(0, index+1).reduce((total, value)=>{
    //       return total += value
    //     }, 0)
    //   })
    //   childHeight = _childHeight;
    // //   // 计算滚动距离
    //   let scollHeight = e.currentTarget.scrollTop;
    // //   // 计算滚动的位置
    //   let index = _childHeight.findIndex(item=>item > scollHeight);
    //   console.log("index",index)
    //   active.value = index;
    //   console.log('active...', active.value, _childHeight);

//方法二
        let H = document.documentElement.clientHeight;
        console.log(H)
            boxs.forEach((item, index) => {
                let top = item.getBoundingClientRect().top; //当前元素距离顶部距离
               console.log('top',index,top)
               if (top > 0 && top <= H / 2) {
                    active.value = index
                    console.log('index',active)
                }
            })
    }


    // })
    //跳转详情
    function goDetail(item1) {
      let id = item1.id;
           router.push({ path: "/detail", query: { id } });
    }
    function goSearch(){
      router.push('/search')
    }
    return {
      homeList: computed(() => store.state.home.homeList),
      classiflyContentList: computed(
        () => store.state.classifly.classiflycontentList
      ),
      tabChange,
      active,
      goDetail,
      scrollEvent,
      goSearch,
      box,
      boxs
    };
  }
});
</script>

<style lang="scss" scoped>
.classifly {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .left {
      width: 30%;
    }
    .right {
      width: 70%;
      overflow: scroll;
      h3 {
        margin-top: 20px;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        dl {
          width: 30%;
          margin-top: 10px;
          dt {
            margin: 0 auto;
            img {
              width: 70%;
            }
            dd {
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>